<template>
  <div class="app-container">

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      @selection-change="handleSelectionChange"
      style="width: 100%; margin-top: 10px;">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template v-slot="scope">
          {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="规则编号" prop="ruleNo"/>
      <el-table-column label="公司名称" prop="compName"/>
      <el-table-column label="客户名称" prop="clientName"/>
      <el-table-column label="状态" prop="ruleState">
        <template slot-scope="scope">
          <span v-if="scope.row.ruleState === '01'">未提交</span>
          <span v-if="scope.row.ruleState === '02'">审批中</span>
          <span v-if="scope.row.ruleState === '03'">已生效</span>
          <span v-if="scope.row.ruleState === '04'">已到期</span>
          <span v-if="scope.row.ruleState === '05'">已打回</span>
        </template>
      </el-table-column>
      <el-table-column label="当前审批" prop="auditName"/>
      <el-table-column label="说明" prop="explains"/>
      <el-table-column label="开始时间" prop="validStartDate"/>
      <el-table-column label="结束时间" prop="validEndDate"/>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      :current-page="pageNum"
      :total="total"
      :page-size="pageSize"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"/>
    <el-row>
      <el-col :span="12">
        <tr style="width: 100px">
          审批结果：
          <el-radio-group v-model="radio">
            <el-radio label="01">通过</el-radio>
            <el-radio label="00">不通过</el-radio>
          </el-radio-group>
        </tr>
        <tr style="height: 20px"></tr>
        <tr style="width: 100px">
          审批意见：
          <el-input
            type="textarea"
            :rows="10"
            :maxlength=100
            placeholder="请输入内容"
            v-model="opinion">
          </el-input>
        </tr>
      </el-col>
      <el-col :span="12">
        <el-col :span="15">
          启用加签:
          <el-switch
            v-model="sign"
            @change="switchOpen"/>
        </el-col>
        <div v-show="openFrame">
          <el-col :span="15">
            加签方式:
            <el-radio-group v-model="radioSign">
              <el-radio label="01">向下加签</el-radio>
              <el-radio label="00">向上加签</el-radio>
            </el-radio-group>
            <el-input size="small" v-model="filterKey" @input="handleFilter" prefix-icon="el-icon-search" placeholder="请输入名称"/>
            <el-table
              ref="signRen"
              style="width: 100%; height: 300px; overflow: auto;"
              @selection-change="refereeSelection"
              :data="filteredData"
            >
              <el-table-column type="selection"/>
              <el-table-column prop="id" label="ID" align="center"/>
              <el-table-column prop="name" label="名称" align="center"/>
              <el-table-column prop="username" label="用名称" align="center"/>
            </el-table>
          </el-col>
        </div>
      </el-col>
    </el-row>

    <el-footer style="text-align: center">
      <el-button style="text-align: center" :disabled="this.ids.length <= 0" @click="submitTo">提交</el-button>
    </el-footer>

  </div>
</template>
<style>
</style>
<script>

import api from '@/api/costRule/cost'
import appApi from '@/api/tool/approval'
export default {
  data() {
    return {
      listLoading: false, // 数据是否正在加载
      list: null, // 列表
      total: 0, // 数据库中的总记录数
      pageNum: 1, // 默认页码
      pageSize: 10, // 每页记录数
      searchObj: {}, // 查询表单对象

      ids: [],
      radio: '01',
      radioSign: '01',
      opinion: '',
      userList: [],
      sign: false,
      openFrame: false,
      filterKey: '', // 过滤关键字
      filteredData: [], // 过滤后的数据
      selectedData: [] // 勾选的数据
    }
  },
  mounted() {
    appApi.getDeptRoleUser().then(res => {
      if (res.code === 200) {
        this.userList = res.data.userList
        this.filteredData = this.userList
      } else {
        this.$message.error('查询失败!')
      }
    })
  },
  watch: {
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.ruleId)
    },
    fetchData(pageNum = 1) {
      this.pageNum = pageNum
      api.getPendingList(this.pageNum, this.pageSize)
        .then(response => {
          this.list = response.data.records
          this.total = response.data.total
        })
    },
    submitTo() {
      const obj = { ids: this.ids, radio: this.radio, opinion: this.opinion }
      if (this.openFrame) {
        // 走加签功能
        obj.radioSign = this.radioSign
        obj.signRens = this.selectedData.map(e => e.id)
        api.addSign(obj).then(res => {
          if (res.code === 200) {
            this.$message.success('加签成功!')
          } else {
            this.$message.error('加签失败!' + res.message)
          }
          this.fetchData()
          this.opinion = ''
          this.radioSign = '01'
        })
      } else {
        // 正常审批
        api.approve(obj).then(res => {
          if (res.code === 200) {
            this.$message.success('提交审批成功!')
          } else {
            this.$message.error('提交审批失败!')
          }
          this.fetchData()
          this.opinion = ''
        })
      }
    },
    switchOpen(val) {
      this.openFrame = val
    },
    refereeSelection(selectedVal) {
      if (selectedVal.length === 0) {
        this.filteredData.forEach(e => {
          const index = this.selectedData.findIndex(item => item.id === e.id)
          if (index >= 0) {
            this.selectedData.splice(index, 1)
          }
        })
      } else {
        const notCu = []
        // 从过滤数据中找出没勾选的数据
        this.filteredData.forEach(e => {
          const index = selectedVal.findIndex(item => item.id !== e.id)
          if (index >= 0) { notCu.push(e) }
        })
        // 把没勾选的从 总集合中删除
        notCu.forEach(ee => {
          const index = this.selectedData.findIndex(item => item.id === ee.id)
          if (index >= 0) {
            this.selectedData.splice(index, 1)
          }
        })
        // 在把新勾选的添加到总集合
        selectedVal.forEach(item => {
          if (!this.selectedData.includes(item)) {
            this.selectedData.push(item)
          }
        })
      }
    },
    handleFilter() {
      this.filteredData = this.userList.filter(item => item.name.includes(this.filterKey))
      this.reselectData()
    },
    reselectData() {
      // 重新勾选 之前勾选的数据
      const newData = this.selectedData.filter(item => this.filteredData.includes(item))
      this.$nextTick(() => {
        if (Array.isArray(newData)) {
          newData.forEach(item => {
            const index = this.filteredData.indexOf(item)
            if (index >= 0) {
              this.$refs.signRen.toggleRowSelection(this.filteredData[index], true)
            }
          })
        } else {
          const index = this.filteredData.indexOf(newData)
          if (index >= 0) {
            this.$refs.signRen.toggleRowSelection(this.filteredData[index], true)
          }
        }
      })
    }
  }
}
</script>
